<template>
  <div class="blog">
    <Card>
      <template #left>
        <div class="blog-userInfo">
          <div class="blog-userInfo-headPic">
            <van-image
              width="50px"
              height="50px"
              round='true'
              :src="author.userImgUrl"
            />
          </div>
          <div class="blog-userInfo-userRelate">
            <p class="blog-userInfo-userRelate-name">{{author.userName}}</p>
            <p class="blog-userInfo-userRelate-level">{{author.userDesc}}</p>
          </div>
        </div>
      </template>
      <template #right>
        <div class="blog-moment">
          <span>—{{date}}</span>
        </div>
      </template>
      <div class="blog-content">
        <div class="blog-content-title">
          <h3>{{title}}</h3>
        </div>
        <div class="blog-content-article">
          <div class="blog-content-article-text">
            <span v-html="content"></span>
          </div>
          <div class="blog-content-article-pic">
              <van-image
                :src="coverUrl"
              />
          </div>
        </div>
        <div class="blog-content-blogInfo">
          <div class="blog-content-blogInfo-tags">
            <van-icon class-prefix="aliIconfont" name="icon-biaoqian"/>
            <span>{{tag}}</span>
          </div>
          <div class="blog-content-blogInfo-favourComment">
            <span>{{like}}</span>
            <van-icon class-prefix="aliIconfont" name="icon-dianzan"/>
            <span>{{comment}}</span>
            <van-icon class-prefix="aliIconfont" name="icon-pinglun"/>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
import { Image as VanImage, Icon } from "vant";
import Card from "@/components/Card.vue";
export default {
  props:['author','content','title','tag','like','comment','date','coverUrl'],
  components:{
    [VanImage.name]:VanImage,
    [Icon.name]:Icon,
    Card,
  }
}
</script>
<style lang="less">
.blog{
  box-shadow: 2px 2px 2px #9999;
  border-radius: 0 0 .625rem .625rem;
  margin-bottom: .625rem;
  overflow: hidden;
  .blog-userInfo {
    display: flex;
    align-items: center;
  }
  .blog-userInfo-userRelate{
    >p{
      margin: 0 .625rem;
      text-align: left;
    }
    .blog-userInfo-userRelate-name{
      font-size: 1.125rem;
      font-weight: bolder;
    }
  }
  .blog-moment{
    color: #999;
  }
  >.diy_card{
    >.diy_card_content{
      background: #fff!important;
    }
  }
  .blog-content{
    .blog-content-title{
      max-height: 3.125rem;
      text-align: left;
      width: 100%;
      word-break:break-all;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      margin-bottom: .3125rem;
      >h3{
        margin: 0 0 .3125rem .3125rem;
      }
    }
    .blog-content-article{
      display: flex;
      text-align: left;
      .blog-content-article-text{
        flex: 1;
        font-size: 1.1875rem;
        word-break:break-all;
        display:-webkit-box;
        -webkit-line-clamp:4;
        -webkit-box-orient:vertical;
        overflow:hidden;
        span{
          p{
            padding: 0;
            margin:0
          }
        }
      }
      .blog-content-article-pic{
        width: 150px;
        height: 100px;
        overflow: hidden;
      }
    }
    .blog-content-blogInfo{
      display: flex;
      justify-content: space-between;
      margin-top: .625rem;
      align-items: center;
      color:#999;
      .aliIconfont{
        font-size: 1.5625rem;
        margin-right: .3125rem;
      }
      .blog-content-blogInfo-favourComment{
        >span{
          margin-left: .625rem;
        }
      }
    }
  }
}

</style>